<template>
  <div class="left_nav">
    <el-menu
      background-color="#e5f1fd"
      text-color="#666"
      active-text-color="#0063c7"
      unique-opened
      :default-active="mainPath"
      class="leftMenu"
      router
    >
      <el-submenu v-for="item in navList" :key="item.name" :index="item.name">
        <template slot="title">
          <span>{{ item.name }}</span>
        </template>
        <el-menu-item
          v-for="unit in item.children"
          :key="unit.url"
          :index="unit.url"
          >{{ unit.name }}</el-menu-item
        >
      </el-submenu>
    </el-menu>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { findNPosition } from "@/utils/util";
export default {
  name: "Nav",
  computed: {
    ...mapState({
      navList: (state) => {
        const arr = [];
        state.RouterList.map((item) => {
          if (item.sysCode === "131452021") {
            item.children.map((unix) => {
              arr.push(unix);
            });
          }
        });
        return arr || [];
      },
    }),
  },
  data() {
    return {
      mainPath: "",
    };
  },
  methods: {
    //计算激活路由
    calcDefultActive() {
      if (this.$route.meta.main === true) {
        // 当一级页面的时候设置激活地址
        this.mainPath = "";
        this.mainPath = this.$route.path;
      } else {
        // 取到第3个/符号的下标
        let sub = findNPosition(this.$route.path, "/", 3);
        if (sub !== 0) {
          this.mainPath = this.$route.path.slice(0, sub);
        }
      }
    },
  },

  created() {
    this.calcDefultActive();
  },
  watch: {
    "$route.path"() {
      this.calcDefultActive();
    },
  },
};
</script>

<style lang="less" scoped>
.left_nav {
  flex: 200px 0 0;
  background-color: #e5f1fd;
  .el-menu {
    border-radius: 10px;
    overflow: hidden;
    flex: 200px 0 0;
    border-right: none;
    .el-submenu {
      /deep/.el-menu {
        .el-menu-item {
          background-color: #f9f9f9 !important;
          &.is-active,
          &.is-active.parent {
            background-color: #ddd !important;
            color: #0063c7 !important;
          }
          &:hover {
            background-color: #ddd !important;
            color: #6ab5f6 !important;
          }
        }
      }
    }
  }
}
</style>
